<template>
    <Form ref="form" inline :model="data" label-position="left">
        <FormItem>
            <DatePicker :editable="false" type="daterange" v-model="data.date" placeholder="请选择日期" />
        </FormItem>
        <FormItem>
            <Input v-model="data.name" v-width="260" placeholder="请输入患者姓名/手机号" />
        </FormItem>
        <FormItem>
            <Select v-width="100" v-model="data.diagnosis" placeholder="患者状态" element-id="diagnosis" clearable>
                <Option :value="0">失效</Option>
                <Option :value="1">待跟踪</Option>
                <Option :value="2">预约</Option>
                <Option :value="3">到诊</Option>
                <Option :value="4">已到老患者</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Select v-width="80" v-model="data.personnel" placeholder="归属人" element-id="personnel" clearable>
                <Option :value="0">高玲</Option>
                <Option :value="1">王艳</Option>
                <Option :value="2">刘志强</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Select v-width="100" v-model="data.disease" placeholder="病种" element-id="diagnosis" clearable>
                <Option :value="0">白癜风</Option>
                <Option :value="1">非白</Option>
                <Option :value="2">皮杂</Option>
                <Option :value="3">白斑待查</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Select v-width="100" v-model="data.channel" placeholder="渠道来源" element-id="diagnosis" clearable>
                <Option :value="0">百度</Option>
                <Option :value="1">门户</Option>
                <Option :value="2">优化</Option>
                <Option :value="3">广告</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Select v-model="model7" filterable multiple placeholder="请先选择归属人再选择标签" :max-tag-count="3">
                <OptionGroup label="营销">
                    <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </OptionGroup>
                <OptionGroup label="活动">
                    <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </OptionGroup>
            </Select>
        </FormItem>
        <FormItem>
            <CheckboxGroup>
                <Checkbox label="我的关注"></Checkbox>
            </CheckboxGroup>
        </FormItem>
    </Form>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            cityList: [
                {
                    value: '在乎费用',
                    label: '在乎费用'
                },
                {
                    value: '专家',
                    label: '专家'
                },
                {
                    value: '敏感',
                    label: '敏感'
                },
                {
                    value: '远程',
                    label: '远程'
                }
            ],
            cityList1: [
                {
                    value: '复诊',
                    label: '复诊'
                },
                {
                    value: '专家',
                    label: '专家'
                },
                {
                    value: '权威',
                    label: '权威'
                }
            ],
            cityList2: [
                {
                    value: '专家活动',
                    label: '专家活动'
                },
                {
                    value: '折扣活动',
                    label: '折扣活动'
                },
                {
                    value: '援助活动',
                    label: '援助活动'
                }
            ],
            model7: '',
            positionList: [
                {
                    value: '头部',
                    label: '头部'
                },
                {
                    value: '面部',
                    label: '面部'
                },
                {
                    value: '四肢',
                    label: '四肢'
                },
                {
                    value: '脚部',
                    label: '脚部'
                }
            ],
            model12: [],
            model13: [],
            grid: {
                xl: 4,
                lg: 8,
                md: 12,
                sm: 24,
                xs: 24
            },
            collapse: false,
            data: {
                name: '',
                date: '',
                consultant: '',
                personnel: '',
                diagnosis: '',
                treatment: '',
                risk: '',
                disease: '',
                channel: ''
            },
            rules: {}
        }
    },
    computed: {
        ...mapState('admin/layout', ['isMobile']),
        labelWidth() {
            return this.isMobile ? undefined : 100
        },
        labelPosition() {
            return this.isMobile ? 'top' : 'right'
        }
    },
    methods: {}
}
</script>
